<template>
  <section style="background: #fff; height: 100%;">
    <div class="register-title">
      <p>请输入参与运动对象的信息</p>
      <p>我们将根据以下信息设计训练方案</p>
    </div>
    <div class="input-container">
      <ul>
        <li>
          <input placeholder="姓名" v-model="form.realName">
        </li>
        <li class="sex">
          <div>
            <span :class="{'active-btn': manOrWoman}" @click="chooseSex('1')">男</span>
          </div>
          <div>
            <span :class="{'active-btn': !manOrWoman}" @click="chooseSex('2')">女</span>
          </div>
        </li>
        <li @click="openDatePick">
          <input placeholder="您的出生日期" disabled v-model="form.birthDateStr">
        </li>
        <li>
          <input placeholder="您的身高/cm" v-model="form.height">
        </li>
        <li>
          <input placeholder="您的体重/kg" v-model="form.body">
        </li>
        <!-- <li>
          <input placeholder="项目名称" v-model="form.projectName">
        </li>
        <li>
          <input placeholder="项目成绩" v-model="form.projectGrade">
        </li> -->
        <li @click="openAreaPick">
          <input placeholder="所在城市" disabled v-model="areaName">
          
        </li>
      </ul>
    </div>
    <div class="footer-btn" @click="submit">信息填写完成</div>
    <mt-datetime-picker
      ref="picker"
      type="date"
      v-model="pickerVisible"
      :startDate="new Date('1949-01-01')"
      :endDate="new Date()"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleConfirm">
    </mt-datetime-picker>

    <mt-popup
      v-model="popupVisible"
      position="bottom"
      style="width: 100%"
      >
      <mt-picker ref="area" :slots="area" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </section>
</template>

<script>
  import { handleDate } from '@assets/js/global'
  import { Indicator, Toast } from 'mint-ui';
  import { register, isFirstBind } from '@/api'
  import { local } from '@assets/js/global'
  import area from '@assets/js/area'
  export default {
    name: "register",
    data () {
      return {
        form: {
          openid: '',//'o48hC5niEbzIs47iqN8qOElS0msI',
          userName: '',
          nickname: '',//'咕噜咕噜',
          realName: '',
          headimgurl: '',
          sex: '1',
          country: 'CN',
          province: '',
          city: '',
          birthDateStr: '',
          height: '',
          body: '',
          // projectName: '',
          // projectGrade: ''
        },
        areaName: '',
        rules:{
          // province: '请选择省份',
          // city: '请选择城市',
          height: '请输入身高',
          body: '请输入体重',
          // projectName: '请输入项目名称',
          // projectGrade: '请输入项目成绩'
        },
        manOrWoman: true,
        pickerVisible: new Date(),
        popupVisible: false,
        area: [
          {
            flex: 1,
            values: [],
            textAlign: 'center'
          }, {
            flex: 1,
            values: [],
            textAlign: 'center'
          }
        ],
      }
    },
    mounted() {
      
    },
    methods: {
      dealArea () {
        this.area[0].values = Object.keys(area)
      },
      openAreaPick () {
        this.popupVisible = true
        this.dealArea()
      },
      handleConfirm (val) {
        this.pickerVisible = val
        this.form.birthDateStr = handleDate('yyyy-MM-dd', val)
        this.$refs.picker.close();
      },
      openDatePick () {
        this.$refs.picker.open();
      },
      onValuesChange (picker, values) {
        if(area[values[0]]){ 
　　　　　 picker.setSlotValues(1, area[values[0]]);
　　　　　 this.form.province = values[0]
　　　　　 this.form.city = values[1]
          this.areaName = this.form.province + ' ' + this.form.city
　　　　 }
      },
      chooseSex (str) {
        str === '1' ? this.manOrWoman = true : this.manOrWoman = false
        this.form.sex = str
      },
      submit () {
        this.form.openid = local.get('userInfo').openid
        this.form.nickname = local.get('userInfo').nickname
        this.form.headimgurl = local.get('userInfo').headimgurl
        for (let i in this.rules) {
          if (this.form[i] === '') {
            Toast({
              message: this.rules[i],
              duration: 1000
            });
            return false
          }
        }
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        register(this.form).then(res => {
          Indicator.close()
          Toast({
            message: '提交成功！',
            duration: 1000
          })
          isFirstBind({openid: local.get('userInfo').openid}).then(res =>  {
            console.log(res)
            if (res.data) {
              console.log('index')
              this.$router.push('/index')
            } else {
              console.log(222)
              window.location.href = 'https://h5.youzan.com/v2/showcase/homepage?alias=0vc7r34yT0'
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @mixin box-height{
    height: 1.18rem;
    line-height: 1.18rem;
  }
  section{
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem 0.4rem 0.6rem;
    .register-title{
      text-align: center;
      color: #333;
      font-size: 0.36rem;
      p{
        margin: 0 0 0.2rem;
      }
      p:nth-child(2){
        font-size: 0.24rem;
        color: #666;
      }
    }
    .input-container{
      li{
        width: 100%;
        height: 1.18rem;
        border-bottom: 1px solid #eaeaea;
      }
      input{
        display: inline-block;
        @include box-height;
        text-align: center;
        width: 100%;
        background: #fff;
      }
      .sex{
        display: flex;
        div{
          flex-grow: 1;
          box-sizing: border-box;
          &:nth-child(1){
            padding-right: 0.3rem;
            text-align: right;
          }
          &:nth-child(2){
            padding-left: 0.3rem;
            text-align: left;
          }
          span{
            display: inline-block;
            width: 1.2rem;
            height: 0.54rem;
            margin-top: 0.32rem;
            border-radius: 4px;
            background: #eaeaea;
            color: #999;
            text-align: center;
            line-height: 0.54rem;
          }
        }
      }
    }
  }
  .footer-btn{
    width: 100%;
    background: #f5c660;
    color: #666;
    text-align: center;
    border-radius: 4px;
    height: 0.9rem;
    line-height: 0.9rem;
    margin-top: 0.2rem;
  }
  .active-btn{
    background: #f5c660 !important;
    color: #666 !important;
  }
</style>
